<!doctype html>
<html>
<head>
<title>DOM Range Example</title>
<script type="text/javascript">
function useRanges() {
	var oRange1 = document.createRange();
	var oRange2 = document.createRange();
	var oP1 = document.getElementById("p1");
	oRange1.selectNode(oP1);
	oRange2.selectNodeContents(oP1);

	document.getElementById("txtStartContainer1").value = oRange1.startContainer.tagName;
	document.getElementById("txtStartOffset1").value = oRange1.startOffset;
	document.getElementById("txtEndContainer1").value = oRange1.endContainer.tagName;
	document.getElementById("txtEndOffset1").value = oRange1.endOffset;
	document.getElementById("txtCommonAncestor1").value = oRange1.commonAncestorContainer.tagName;

	document.getElementById("txtStartContainer2").value = oRange2.startContainer.tagName;
	document.getElementById("txtStartOffset2").value = oRange2.startOffset;
	document.getElementById("txtEndContainer2").value = oRange2.endContainer.tagName;
	document.getElementById("txtEndOffset2").value = oRange2.endOffset;
	document.getElementById("txtCommonAncestor2").value = oRange2.commonAncestorContainer.tagName;

	var oRange3 = document.createRange();
	var oRange4 = document.createRange();
	var goa = document.getElementById('goa');
	oRange3.selectNode(goa);
	oRange4.selectNodeContents(goa);
	console.log(oRange3.startContainer.tagName);
	console.log(oRange3.startOffset);
	console.log(oRange3.endContainer.tagName);
	console.log(oRange3.endOffset);
	console.log(oRange3.commonAncestorContainer.tagName);

	console.log('');

	console.log(oRange4.startContainer.tagName);
	console.log(oRange4.startOffset);
	console.log(oRange4.endContainer.tagName);
	console.log(oRange4.endOffset);
	console.log(oRange4.commonAncestorContainer.tagName);

	console.log('');
	
	console.log(oRange1.parentElement);
}
</script>
</head>
<body contenteditable="true">
<!--
<div id="box1">divdiv</div>
<br/><br/>
<span>spanspan</span>
<br/><br/>
<div>divdiv<p>pppp<span>hello world!</span>pppp</p>divdiv</div><br/><br/>
<div>divdiv<p id="box2">pppp<strong id="box2">hello world!</strong>pppp</p>divdiv</div><br/><br/>
<div>divdiv<p>pppp<i>hello world!</i>pppp</p>divdiv</div><br/><br/>
<div>divdiv<p>pppp<b>hello world!</b>pppp</p>divdiv</div>
-->


<p id="p1"><b>Hello</b>World</p>
<p id="p2"><b>Hello<span id="goa"><a href="">go</a></span>world</b> World</p>
<input type="button" value="Use Ranges" onclick="useRanges()" /> 

<table border="0">
	<tr>
		<td>
			<fieldset>
				<legend>oRange1</legend>
				Start Container: 
				<input type="text" id="txtStartContainer1" /><br />
				Start Offset: 
				<input type="text" id="txtStartOffset1" /><br />
				End Container: 
				<input type="text" id="txtEndContainer1" /><br />
				End Offset: 
				<input type="text" id="txtEndOffset1" /><br />
				Common Ancestor: 
				<input type="text" id="txtCommonAncestor1" /><br /> 
			</fieldset>
		</td>
		<td>
			<fieldset>
				<legend>oRange2</legend>
				Start Container: 
				<input type="text" id="txtStartContainer2" /><br />
				Start Offset: 
				<input type="text" id="txtStartOffset2" /><br />
				End Container: 
				<input type="text" id="txtEndContainer2" /><br />
				End Offset: 
				<input type="text" id="txtEndOffset2" /><br />
				Common Ancestor: 
				<input type="text" id="txtCommonAncestor2" /><br />
			</fieldset>
		</td>
	</tr>
</table>



<script>


window.onload = function() {

	var selection = window.getSelection();
	console.log(selection);

	// 谷歌浏览器，此两个方法都有；
	// console.log(selection.removeAllRanges);
	// console.log(selection.empty);
	// console.log(selection.removeAllRanges === selection.empty); // false

	// console.log(selection.createRange); // 谷歌浏览器：undefined；
	// console.log(selection.getRangeAt); // 谷歌浏览器：有此方法；
	
	// 必须给一个参数；直接这样用，报错：Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
	// 这是因为必须先有一段被选中的文本才行；
	//var range = selection.getRangeAt(0); 
	//console.log(range);

	var bodyEle = document.getElementsByTagName("body")[0];
	
	// 选择一段文本后，松开鼠标执行，就对了。
	bodyEle.onmouseup = function(e){
		//console.log(selection.text); // 谷歌浏览器：undefined；
		// console.log(selection.toString()); // 谷歌浏览器：正确的值；

		
		var range = selection.getRangeAt(0);
		// console.log(range.toString()); // 谷歌浏览器：也是正确的值；
		// range.collapsed true表示没有选中任何文本；
		
		// range.commonAncestorContainer 的含义：同一个元素内选中，此值总是 text；跨元素选中才能看到区别；
		// <div>divdiv</div> 如果只是在内部的 divdiv 随便选中，都是text；
		// <div>divdiv<span>spanspan</span></div> 选中的内容，既包含span里的，又包含前面的div中的，那么就看到值是 div 了。

		// range.startOffset 选中区域第一个字符，在 startContainer 中的位置，从0开始计数的；
		// range.endOffset 选中区域第一个字符，在 endContainer 中的位置，从1开始计数的；


		console.log(range);
		console.log(range.startContainer.nodeType);
		console.log(range.endContainer.nodeType);
		//console.log(selection);


		//setTimeout(function(){
			//console.log(data1);
			//console.log(data2);
			//range.setStart(document.getElementById('box1'), data1);
			//range.setEnd(document.getElementById('box1'), data2);
			//console.log(range);
		//}, 3000);
		

	
		// 清空选中区域，谷歌浏览器，两个方法都可以；
		//setTimeout(function(){
			// selection.empty();
			// selection.removeAllRanges();
		//}, 3000);
	};

};

</script>
</body>
</html>